<template>
  <div class="p-2">
    <div class="text-right mb-2">
      <el-button size="small" icon="el-icon-printer" :disabled="loading" @click="handlePrint">
        打印
      </el-button>
      <el-button
        icon="el-icon-download"
        :loading="downloadLoading"
        @click="handleExport(relatedData.customer_name)"
      >
        导出
      </el-button>
    </div>
    <div :id="printId">
      <table
        class="table table-bordered vertical-align-middle text-center table-sm"
        v-loading="loading"
      >
        <colgroup>
          <col width="20%" />
          <col width="30%" />
          <col width="25%" />
          <col width="25%" />
        </colgroup>
        <tbody>
          <tr v-for="(p, index) of tableData" :key="index">
            <td class="td-label">{{ p.label }}</td>
            <td :colspan="p.colspan || 1" :class="p.class || 'text-center'">
              {{ relatedData[p.prop] }}
            </td>
            <td class="td-label" v-if="p.label2">{{ p.label2 }}</td>
            <td v-if="p.label2">{{ relatedData[p.prop2] }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import { enumDispute } from '@/bank/plugins/enum'
import { enumLoanbehStatus, enumReviewApproval } from '@/bank/views/limit/index'
import { printA4, excelTableExport, domHasClass } from '@vimi/utils-tool'
export default {
  props: {
    queryId: String,
  },
  data() {
    return {
      tableName: 'datum_one_county_industry',
      loading: false,
      relatedData: {},
      tableData: [
        {
          label: '受保企业名称或贷款人姓名',
          prop: 'customer_name',
          label2: '项目状态',
          prop2: 'statusLabel',
        },
        {
          label: '被担保人类型',
          prop: 'org_class_name',
          label2: '归属地址（市、县）',
          prop2: 'addressAll',
        },
        {
          label: '所属行业',
          prop: 'parent_main_business',
          label2: '十二大产业',
          prop2: 'main_business',
        },
        {
          label: '受保企业联系人姓名',
          prop: 'corp_name',
          label2: '受保企业联系人电话',
          prop2: 'corp_phone',
        },
        {
          label: '三证合一',
          prop: 'isCertMerge',
          label2: '统一社会信用代码',
          prop2: 'register_no',
        },
        {
          label: '身份证号码',
          prop: 'lender_idcard',
          label2: '担保（放款）金额（万元）',
          prop2: 'warranty_amount',
        },
        { label: '放款日期', prop: 'loadDate', label2: '还款日期', prop2: 'loadEndDate' },
        {
          label: '贷款期限(月)',
          prop: 'warranty_period',
          label2: '担保费利率(%)',
          prop2: 'warranty_rate',
        },
        {
          label: '放款银行名称',
          prop: 'claim_bank_name',
          label2: '银行贷款利率(%)',
          prop2: 'load_rate',
        },
        {
          label: '借款合同号',
          prop: 'gua_contract',
          label2: '借据号',
          prop2: 'iou_no',
        },
        {
          label: '销售收入(万元)',
          prop: 'sale_income',
          label2: '资产总额(万元)',
          prop2: 'assets_total',
        },
        {
          label: '从业人数',
          prop: 'emp_total',
          label2: '收取受保企业保证金',
          prop2: 'income_margin',
        },
        //  {
        //   label: '贷款具体用途',
        //   prop: 'emp_total',
        //   label2: '保费是否客户承担',
        //   prop2: 'isFeeCustomer',
        // },
        {
          label: '贷款用途分类',
          prop: 'use_category_name',
          label2: '贷款具体用途',
          prop2: 'funds_use_dir',
        },
        {
          label: '保费是否客户承担',
          prop: 'isFeeCustomer',
          label2: '备注',
          prop2: 'remark',
        },
      ],
      downloadLoading: false,
    }
  },
  watch: {
    queryId: {
      handler: function () {
        this.getData()
      },
      immediate: true,
    },
  },
  computed: {
    printId() {
      return `${this.queryId}-project-detai`
    },
  },
  created() {},
  methods: {
    getData() {
      this.relatedData = {}
      if (!this.queryId) {
        return
      }
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, { 'customer_related_id.eq': this.queryId })
        .then(res => {
          const data = res?.data?.[0] ?? {}
          data.addressAll = `${data.address_name_city || ''}${data.address_name_county || ''}`
          data.isCertMerge = enumDispute[data.is_cert_merge]
          data.isFeeCustomer = enumDispute[data.is_gua_fee_customer]
          data.loadEndDate = this.$utils.dateFormat(data.load_end_date, 'yyyy-MM-dd')
          data.loadDate = this.$utils.dateFormat(data.load_date, 'yyyy-MM-dd')
          data.statusLabel =
            +data.review_approval === 4
              ? enumLoanbehStatus[data.load_beh_status]
              : enumReviewApproval[data.review_approval]
          this.relatedData = { ...data }
        })
        .finally(() => {
          this.loading = false
        })
    },
    handlePrint() {
      printA4(
        document.getElementById(this.printId).innerHTML,
        `
       .vertical-align-middle td { vertical-align: middle; }
       .td-label { text-align: left; background-color: $gray-100; }
      `
      )
    },
    handleExport(name) {
      const borderAllThin = {
        left: { style: 'thin' },
        top: { style: 'thin' },
        right: { style: 'thin' },
        bottom: { style: 'thin' },
      }
      this.downloadLoading = true
      excelTableExport(this.printId, name, {
        styles: {
          border: borderAllThin,
          alignment: {
            vertical: 'center',
            horizontal: 'left',
            wrapText: true,
          },
        },
        cellStyles: {},
        cols: [{ wch: 20 }, { wch: 30 }, { wch: 20 }, { wch: 30 }],
        rows: {},
        cellHandler({ value, td }) {
          const style = {}
          if (domHasClass(td, 'text-center')) {
            style.alignment = { horizontal: 'center' }
          }
          return { value, style }
        },
      }).finally(() => {
        this.downloadLoading = false
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.vertical-align-middle td {
  vertical-align: middle;
}
.td-label {
  text-align: left;
  background-color: $gray-100;
}
</style>
